<template>
  <div id="main" class="container"></div>
</template>

<script>
import dataApi from "@/api/data";
export default {
  data() {
    return {
      child_city:'北京',
      chart: null,
      items: [],
    };
  },
  watch:{
    city(val){
      this.child_city = val
    }
  },
  props:{
    city:String
  },
  mounted() {
    this.prepareData();
  },
  methods: {
    selectChange(){
      this.items = []
      this.prepareData()
    },
    prepareData() {
      dataApi.getData().then((res) => {
        //console.log(this.child_city);
        let result = JSON.parse(JSON.stringify(res.data.items));
        
        for (let i = 0; i < result.length; i++) {
          if (result[i]["city"] === this.child_city) {
            this.items.push(result[i]);
          }
        }
        this.initChart();
      });
    },
    initChart() {
      this.chart = this.$echarts.init(document.getElementById("main"));
      let option = this.setChart();
      if (option && typeof option === "object") {
        this.chart.setOption(option); 
      }   
      window.addEventListener("resize",()=>{
          this.resizeChart()
      })
    },
    setChart() {
      let option = {
        title: {
          text: this.child_city + "林地数据堆叠区域图",
           subtext: "国家林草局统计年鉴",
          right: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: ["林地面积", "森林面积","人工林面积","天然林面积"],
          top:'65',
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            name: '年',
            boundaryGap: false,
            data: ["2013", "2014", "2015", "2016", "2017", "2018"],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "面积(万公顷)",
            nameTextStyle: {
              color: "#222",
              fontSize: 16,
          },
          },
        ],
        series: [
          {
            name: "林地面积",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: this.getData("林地面积"),
          },
          {
            name: "森林面积",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: this.getData("森林面积"),
          },
           {
            name: "人工林面积",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: this.getData("人工林面积"),
          },
           {
            name: "天然林面积",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: this.getData("天然林面积"),
          },
        ],
      };
      return option;
    },
    getData(item) {
      let res = [];
      for (let i = 0; i < this.items.length; i++) {
        res.push(Number(this.items[i][item]));
      }
      return res;
    },
    resizeChart(){
        this.chart.resize()
    }
  },
};
</script>

<style>
.container {
  width: 100%;
  height: calc(80vh);
}
</style>